<template>
  <!-- 定义容器元素，用于渲染Three.js场景 -->
  <div ref="container" class="three-container"></div>
</template>

<script>
// 导入Three.js核心库和扩展模块
import * as THREE from "three";
// 导入轨道控制器，用于实现鼠标拖拽旋转场景的功能
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
// 导入GLTF模型加载器（当前代码未使用，但保留用于未来扩展
import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js";
// 导入GLTF模型加载器（当前代码未使用，但保留用于未来扩展
import { markRaw } from 'vue'; // 防止Vue对Three.js对象进行响应式代理

export default {
  data() {
    return {
      // Three.js核心对象
      scene: null,          // 3D场景
      camera: null,         // 相机
      renderer: null,       // 渲染器
      controls: null,       // 轨道控制器
      cube: null,           // 场景中的立方体对象
      animationId: null,    // 动画帧ID
      container: null       // 容器DOM元素引用
    };
  },
  mounted() {
    // 组件挂载后初始化Three.js场景
    this.container = this.$refs.container;
    this.initScene();         // 初始化场景、相机和渲染器
    this.addObjects();        // 添加光源和3D对象
    this.camera.lookAt(this.scene.position); // 让相机指向场景中心
    this.setupControls();     // 设置轨道控制器
    this.handleResize();      // 处理窗口大小
    this.startAnimation();    // 启动动画循环
     // 添加窗口大小变化事件监听器，确保场景响应窗口尺寸变化
    window.addEventListener('resize', this.handleResize);
  },
  beforeDestroy() {
    // 组件销毁前清理资源，防止内存泄漏
    
    this.stopAnimation();                 // 停止动画循环
    window.removeEventListener('resize', this.handleResize); // 移除事件监听器
    
    // 释放控制器和渲染器资源
    if (this.controls) this.controls.dispose();
    if (this.renderer) {
      this.renderer.dispose();            // 释放渲染器资源
      this.renderer.forceContextLoss();   // 强制丢失WebGL上下文
    }
    
    // 遍历场景中的所有对象，释放几何和材质资源
    if (this.scene) {
      this.scene.traverse((child) => {
        if (child.isMesh) {
          if (child.geometry) child.geometry.dispose();
          if (child.material) {
            if (Array.isArray(child.material)) {
              child.material.forEach(m => {
                if (m.map) m.map.dispose();  // 释放纹理
                m.dispose();                 // 释放材质
              });
            } else {
              if (child.material.map) child.material.map.dispose();
              child.material.dispose();
            }
          }
        }
      });
    }
    
    // 将所有对象引用设为null，帮助垃圾回收
    this.scene = null;
    this.camera = null;
    this.renderer = null;
    this.controls = null;
    this.container = null;
  },
  methods: {
    // initScene() {
    //   // 初始化Three.js场景
      
    //   
    //   this.scene = markRaw(new THREE.Scene());
    //   this.scene.background = new THREE.Color(0xf0f0f0); 
      
    //   // 创建透视相机，参数：视野角度(75°)、宽高比、近裁剪面、远裁剪面
    //   const aspect = this.container.clientWidth / this.container.clientHeight;
    //   this.camera = markRaw(new THREE.PerspectiveCamera(75, aspect, 0.1, 2000));
    //   this.camera.position.z = 5; // 设置相机位置，沿Z轴后退5个单位
      
    //   // 创建WebGL渲染器，启用抗锯齿和alpha通道
    //   this.renderer = markRaw(new THREE.WebGLRenderer({ 
    //     antialias: true,
    //     alpha: true
    //   }));
    //   this.renderer.setPixelRatio(window.devicePixelRatio); // 设置设备像素比，支持高DPI屏幕
    //   this.renderer.setSize(this.container.clientWidth, this.container.clientHeight); 
    //   this.renderer.outputEncoding = THREE.sRGBEncoding; 
    //   console.log('容器尺寸:', this.container.clientWidth, this.container.clientHeight);
    //   
    //   this.container.appendChild(this.renderer.domElement);
    // },
    initScene() {
      try {
        // 创建场景对象，使用markRaw防止Vue响应式代理
        this.scene = markRaw(new THREE.Scene());
        this.scene.background = new THREE.Color(0xf0f0f0);// 设置背景色为浅灰色
        // 设置渲染尺寸
        const aspect = this.container.clientWidth / this.container.clientHeight;
        this.camera = markRaw(new THREE.PerspectiveCamera(75, aspect, 0.1, 2000));
        this.camera.position.z = 5;
        
        this.renderer = markRaw(new THREE.WebGLRenderer({ 
          antialias: true,
          alpha: true
        }));
        
        // 调试：打印容器和渲染器尺寸
        console.log('容器尺寸:', this.container.clientWidth, this.container.clientHeight);
        
        this.renderer.setSize(this.container.clientWidth, this.container.clientHeight);
        
        // 调试：打印渲染器实际尺寸
        console.log('渲染器尺寸:', this.renderer.domElement.width, this.renderer.domElement.height);
        // 设置输出编码，确保颜色正确显示
        this.renderer.outputEncoding = THREE.sRGBEncoding;
        // 将渲染器的DOM元素添加到容器中
        this.container.appendChild(this.renderer.domElement);
      } catch (error) {
        console.error('初始化Three.js场景时出错:', error);
      }
    },
    addObjects() {
      // 向场景中添加光源和3D对象
      
      // 添加环境光，均匀照亮场景
      const ambientLight = new THREE.AmbientLight(0xffffff, 0.7); // 白色光，强度0.7
      this.scene.add(ambientLight);
      
      // 添加方向光，产生阴影和高光效果
      const directionalLight = new THREE.DirectionalLight(0xffffff, 1.0); // 白色光，强度1.0
      directionalLight.position.set(5, 5, 5); // 设置光源位置
      this.scene.add(directionalLight);
      
      // 添加网格辅助线，帮助可视化场景坐标系
      const gridHelper = new THREE.GridHelper(10, 10, 0xcccccc, 0xcccccc);
      this.scene.add(gridHelper);
      
      // 添加坐标轴辅助，X轴为红色，Y轴为绿色，Z轴为蓝色
      const axesHelper = new THREE.AxesHelper(5);
      this.scene.add(axesHelper);
      
      // 创建一个立方体网格对象
      const geometry = new THREE.BoxGeometry(1, 1, 1); // 几何体：1x1x1的立方体
      const material = new THREE.MeshStandardMaterial({ 
        color: 0x00ff00,       // 颜色：绿色
        metalness: 0.3,        // 金属度
        roughness: 0.4         // 粗糙度
      });
      this.cube = markRaw(new THREE.Mesh(geometry, material));
      this.scene.add(this.cube);
    },
    setupControls() {
      // 设置轨道控制器，允许用户通过鼠标交互控制相机
      
      // 创建轨道控制器实例，传入相机和渲染器DOM元素
      this.controls = markRaw(new OrbitControls(this.camera, this.renderer.domElement));
      
      // 启用阻尼效果，使相机移动更平滑
      this.controls.enableDamping = true;
      this.controls.dampingFactor = 0.05; // 阻尼系数，值越小阻尼越大
    },
    handleResize() {
      // 处理窗口大小变化事件
      
      if (!this.camera || !this.renderer || !this.container) return;
      
      const width = this.container.clientWidth;
      const height = this.container.clientHeight;
      
      // 更新相机的宽高比和投影矩阵
      this.camera.aspect = width / height;
      this.camera.updateProjectionMatrix();
      
      // 更新渲染器的尺寸
      this.renderer.setSize(width, height);
    },
    startAnimation() {
      // 启动动画循环，使用requestAnimationFrame实现平滑动画
      
      const animate = () => {
        this.animationId = requestAnimationFrame(animate);
        
        // 更新控制器（如果启用了阻尼效果，需要每帧更新）
        if (this.controls) this.controls.update();
        
        // 更新场景中的对象
        if (this.cube) {
          this.cube.rotation.x += 0.01;  // 每帧绕X轴旋转0.01弧度
          this.cube.rotation.y += 0.01;  // 每帧绕Y轴旋转0.01弧度
        }
        
        // 渲染场景
        if (this.renderer && this.scene && this.camera) {
          this.renderer.render(this.scene, this.camera);
        }
      };
      
      animate(); // 开始动画循环
    },
    stopAnimation() {
      // 停止动画循环，取消requestAnimationFrame
      
      if (this.animationId) {
        cancelAnimationFrame(this.animationId);
        this.animationId = null;
      }
    }
  }
};
</script>

<style scoped>
.three-container {
  display: flex;
  width: 100% !important;           
  height: 500px;          
  min-height: 400px;    
  border: 1px solid #ccc;  
}
</style>